<template>
  <div class="user-management">
    <el-page-header content="用户管理" />

    <!-- 新增用户按钮 -->
    <el-button type="primary" @click="openAddDialog" style="margin: 10px 0">
      <el-icon><Plus /></el-icon> 新增用户
    </el-button>

    <!-- 用户列表表格 -->
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <!-- 删除按钮 -->
      <el-button 
      type="danger" 
      size="small" 
      @click="handleDelete(scope.row.id)"
      >
      <el-icon><Delete /></el-icon> 删除
      </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div style="margin-top: 10px; text-align: right;">
      <el-pagination
        v-model:current-page="pageInfo.currentPage"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 20]"
        :total="pageInfo.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 新增用户弹窗 -->
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="400px"
    >
      <el-form 
        :model="formData" 
        label-width="80px"
        :rules="formRules"
        ref="formRef"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="formData.age" type="number" />
        </el-form-item>
        <!-- 新增：ID输入框 -->
      <el-form-item label="ID" prop="id">
        <el-input v-model.number="formData.id" type="number" placeholder="请输入ID" />
      </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>



import { ref, onMounted, reactive } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 引入接口（根据实际路径调整）
import { getUsers, addUser, deleteUser } from '@/api/user';


// 表格数据（直接接收后端返回的数组）
const tableData = ref([]);
// 加载状态
const loading = ref(false);
// 弹窗状态
const dialogVisible = ref(false);
// 弹窗标题
const dialogTitle = ref('新增用户');
// 表单数据
const formData = ref({
  name: '',
  age: null
});
// 表单验证规则
const formRules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
});
// 表单引用
const formRef = ref(null);

// 分页信息（后端若支持分页，需返回总条数；若不支持，total 可固定为表格数据长度）
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0 // 总条数从后端获取或根据表格数据长度动态设置
});

// 页面加载时获取数据
onMounted(() => {
  fetchUserList();
});

// 1. 查询用户列表（适配后端返回的数组格式）
const fetchUserList = async () => {
  loading.value = true;
  try {
    // 向后端传递分页参数（若后端支持分页）
    const response = await getUsers({
      pageNum: pageInfo.currentPage,
      pageSize: pageInfo.pageSize
    });
    // 后端直接返回用户数组，直接赋值给表格
    tableData.value = response; 
    // 若后端不支持分页，总条数设为数组长度；若支持，从后端返回的 total 字段获取
    pageInfo.total = tableData.value.length; 
  } catch (error) {
    ElMessage.error('获取用户列表失败：' + (error.response?.data?.msg || error.message));
    tableData.value = [];
    pageInfo.total = 0;
  } finally {
    loading.value = false;
  }
};

// 2. 打开新增弹窗
const openAddDialog = () => {
  dialogTitle.value = '新增用户';
  formData.value = { name: '', age: null };
  dialogVisible.value = true;
};

// 3. 提交新增用户
const handleSubmit = async () => {
  await formRef.value.validate();
  try {
    await addUser(formData.value);
    ElMessage.success('新增成功');
    dialogVisible.value = false;
    fetchUserList(); // 新增后刷新列表
  } catch (error) {
    ElMessage.error('新增失败：' + (error.response?.data?.msg || error.message));
  }
};

// 4. 删除用户
const handleDelete = async (id) => {
  console.log("要删除的用户ID是：", id); 
  try {
    await deleteUser(id);
    ElMessage.success('删除成功');
    // 若当前页数据删完，跳转到上一页
    if (tableData.value.length === 1 && pageInfo.currentPage > 1) {
      pageInfo.currentPage--;
    }
    fetchUserList(); // 删除后刷新列表
  } catch (error) {
    ElMessage.error('删除失败：' + (error.response?.data?.msg || error.message));
  }
};

// 5. 分页参数变化时刷新列表
const handlePageChange = () => {
  fetchUserList();
};
</script>

<style scoped>
.user-management {
  padding: 20px;
}
</style>